<script setup>
import { ref } from 'vue';

const cabinetId = ref('');
function openScan() {
	uni.scanCode({
		scanType: 'qrCode',
		success: (res) => {
			console.log('扫码成功', res);
			if (res.result) {
				cabinetId.value = res.result.match(/id=(\w+)/)[1];
				uni.redirectTo({
					url: `/subpkg/TakeIndex/TakeIndex?cabinetId=${cabinetId.value}`
				});
			}
		}
	});
}

</script>

<template>
	<view class="scan-page">
		<view class="image-box">
			<div class="scanner"></div>
			<image src="/static/images/jigui.png" mode="widthFix"></image>
		</view>

		<view class="button" @click="openScan">去扫码</view>
	</view>
</template>

<style lang="scss">
.scan-page {
	background-color: #ffffff;
	height: 100vh;
	view {
		box-sizing: border-box;
	}
	.title {
		font-size: 50rpx;
		text-align: center;
		line-height: 120rpx;
		font-weight: bold;
	}
}
.image-box {
	position: relative;
	width: 500rpx;
	margin: 140rpx auto 40rpx;
	image {
		width: 500rpx;
	}

	.scanner {
		position: absolute;
		left: 145rpx;
		top: 8rpx;
		height: 170rpx;
		width: 170rpx;
		border-radius: 50%;
		overflow: hidden;
		background: url('/static/images/qr.png') center;
		background-size: contain;
		background-color: #fff;
		border: #3ae1c1 3rpx solid;
		animation: scale 1s infinite alternate;
		animation-timing-function: cubic-bezier(0.53, 0, 0.43, 0.5);
		&::after {
			content: '';
			position: absolute;
			left: 0rpx;
			height: 200rpx;
			width: 200rpx;
			background: linear-gradient(180deg, rgba(0, 255, 51, 0) 43%, #3ae1c1 211%);
			border-bottom: 3px solid #3ae1c1;
			transform: translateY(-100%);
			animation: radar-beam 2s infinite;
			animation-timing-function: cubic-bezier(0.53, 0, 0.43, 0.99);
			animation-delay: 0s;
		}
		@keyframes radar-beam {
			0% {
				transform: translateY(-100%);
			}

			100% {
				transform: translateY(0);
			}
		}
		@keyframes scale {
			0% {
				transform: scale(0.9);
			}

			100% {
				transform: scale(1);
			}
		}
	}
}

.button {
	margin: 50rpx auto;
	text-align: center;
	background-color: #3bae43;
	color: #fefefe;
	height: 90rpx;
	line-height: 90rpx;
	border-radius: 45rpx;
	width: 60%;
}
</style>